<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>硬币翻转</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
    div{
      height: 400px;
      width: 500px;
      margin: 100px auto;
      position: relative;
    }
    img{
      position: absolute;
      top: 0;
      left: 0;
      transition: all 3s;
    }
    div:hover img{
      transform: rotateY(180deg);
    }
    div img:nth-child(1){
      z-index: 1;
      backface-visibility: hidden;
    }
   
</style>
</head>
<body>
    	<div >
    		<img src="images/qian.svg" alt="">
		    <img src="images/hou.svg" alt="">
		    </div>
</body>
</html>